<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div class="fixed-table-toolbar" style="margin-left: 20px">
                    <div class="columns pull-left nopadding">
                        <select id="eBatchId" name="eBatchId" class="form-control">
                        </select>
                    </div>
                    <div class="columns pull-left">
                        <button class="btn btn-success" style="margin-left:5px;" id="analyze">分析</button>
                    </div>
                </div>

                <div class="wrapper wrapper-content animated fadeInRight">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-content">
                                    <div style="height:600px;margin-top: 40px" id="echarts-map-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="clear: both"></div>
                <!--<table id="exampleTable"  data-mobile-responsive="true">
                </table>-->
            </div>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>排名</h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-bar-chart" style="height: 300px"></div>
            </div>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>
<!--<script type="text/javascript" src="/js/webJs/synthesizeWeb/printOutput/printOutput.js"></script>-->
<script src="/js/plugins/echarts/echarts-all.js"></script>
<script>
    $(function () {
        $.ajax({
            url: '/synthesize/resultEnter/eBatch',
            success: function (r) {
                if (r.code == 0) {
                    var list = r.data;
                    var opt = '<option value="">请选择考试批次</option>';
                    for (var i = 0; i < list.length; i++) {
                        opt += '<option value="' + list[i].id + '">' + list[i].name + '</option>'
                    }
                    $("#eBatchId").html(opt);
                } else {
                    layer.msg(r.msg);
                }
            }
        });

        layui.use('layer', function () {
            var layer = layui.layer;
            $("#analyze").click(function () {
                if ($("#eBatchId").val() == '') {
                    layer.msg("请先选择考试");
                    return false
                }
                $.ajax({
                    type: 'POST',
                    data: {
                        eBatchId: $("#eBatchId").val()
                    },
                    url: '/synthesize/analyze/analyze',
                    success: function (r) {
                        ecahrtMap(r.data);
                        bar(r.data)
                    }
                })
            })
        });

    });

    function ecahrtMap(data) {
        console.log("data = ", data)

        var mapChart = echarts.init(document.getElementById("echarts-map-chart"));
        var mapoption = {
            title: {
                text: '全国地区成绩分析',
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['最高分', '平均分', '通过率(%)'],
                selectedMode: 'single',
                selected: {
                    '平均分': false,
                    '通过率(%)': false
                }
            },
            dataRange: {
                min: 0,
                max: 100,
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            roamController: {
                show: true,
                x: 'right',
                mapTypeControl: {
                    'china': true
                }
            },
            series: [
                {
                    name: '最高分',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    itemStyle: {
                        normal: {label: {show: true}},
                        emphasis: {label: {show: true}}
                    },
                    data: [
                        {name: data[0].province[0], value: data[0].max[0]},
                        {name: data[0].province[1], value: data[0].max[1]},
                        {name: data[0].province[2], value: data[0].max[2]},
                        {name: data[0].province[3], value: data[0].max[3]},
                        {name: data[0].province[4], value: data[0].max[4]},
                        {name: data[0].province[5], value: data[0].max[5]},
                        {name: data[0].province[6], value: data[0].max[6]},
                        {name: data[0].province[7], value: data[0].max[7]},
                        {name: data[0].province[8], value: data[0].max[8]},
                        {name: data[0].province[9], value: data[0].max[9]},
                        {name: data[0].province[10], value: data[0].max[10]},
                        {name: data[0].province[11], value: data[0].max[11]},
                        {name: data[0].province[12], value: data[0].max[12]},
                        {name: data[0].province[13], value: data[0].max[13]},
                        {name: data[0].province[14], value: data[0].max[14]},
                        {name: data[0].province[15], value: data[0].max[15]},
                        {name: data[0].province[16], value: data[0].max[16]},
                        {name: data[0].province[17], value: data[0].max[17]},
                        {name: data[0].province[18], value: data[0].max[18]},
                        {name: data[0].province[19], value: data[0].max[19]},
                        {name: data[0].province[20], value: data[0].max[20]},
                        {name: data[0].province[21], value: data[0].max[21]},
                        {name: data[0].province[22], value: data[0].max[22]},
                        {name: data[0].province[23], value: data[0].max[23]},
                        {name: data[0].province[24], value: data[0].max[24]},
                        {name: data[0].province[25], value: data[0].max[25]},
                        {name: data[0].province[26], value: data[0].max[26]},
                        {name: data[0].province[27], value: data[0].max[27]},
                        {name: data[0].province[28], value: data[0].max[28]},
                        {name: data[0].province[29], value: data[0].max[29]},
                        {name: data[0].province[30], value: data[0].max[30]},
                        {name: data[0].province[31], value: data[0].max[31]},
                        {name: data[0].province[32], value: data[0].max[32]},
                        {name: data[0].province[33], value: data[0].max[33]},
                        {name: data[0].province[34], value: data[0].max[34]},
                    ]
                },
                {
                    name: '平均分',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    itemStyle: {
                        normal: {label: {show: true}},
                        emphasis: {label: {show: true}}
                    },
                    data: [
                        {name: data[0].province[0], value: data[0].avg[0]},
                        {name: data[0].province[1], value: data[0].avg[1]},
                        {name: data[0].province[2], value: data[0].avg[2]},
                        {name: data[0].province[3], value: data[0].avg[3]},
                        {name: data[0].province[4], value: data[0].avg[4]},
                        {name: data[0].province[5], value: data[0].avg[5]},
                        {name: data[0].province[6], value: data[0].avg[6]},
                        {name: data[0].province[7], value: data[0].avg[7]},
                        {name: data[0].province[8], value: data[0].avg[8]},
                        {name: data[0].province[9], value: data[0].avg[9]},
                        {name: data[0].province[10], value: data[0].avg[10]},
                        {name: data[0].province[11], value: data[0].avg[11]},
                        {name: data[0].province[12], value: data[0].avg[12]},
                        {name: data[0].province[13], value: data[0].avg[13]},
                        {name: data[0].province[14], value: data[0].avg[14]},
                        {name: data[0].province[15], value: data[0].avg[15]},
                        {name: data[0].province[16], value: data[0].avg[16]},
                        {name: data[0].province[17], value: data[0].avg[17]},
                        {name: data[0].province[18], value: data[0].avg[18]},
                        {name: data[0].province[19], value: data[0].avg[19]},
                        {name: data[0].province[20], value: data[0].avg[20]},
                        {name: data[0].province[21], value: data[0].avg[21]},
                        {name: data[0].province[22], value: data[0].avg[22]},
                        {name: data[0].province[23], value: data[0].avg[23]},
                        {name: data[0].province[24], value: data[0].avg[24]},
                        {name: data[0].province[25], value: data[0].avg[25]},
                        {name: data[0].province[26], value: data[0].avg[26]},
                        {name: data[0].province[27], value: data[0].avg[27]},
                        {name: data[0].province[28], value: data[0].avg[28]},
                        {name: data[0].province[29], value: data[0].avg[29]},
                        {name: data[0].province[30], value: data[0].avg[30]},
                        {name: data[0].province[31], value: data[0].avg[31]},
                        {name: data[0].province[32], value: data[0].avg[32]},
                        {name: data[0].province[33], value: data[0].avg[33]},
                        {name: data[0].province[34], value: data[0].avg[34]},
                    ]
                },
                {
                    name: '通过率(%)',
                    type: 'map',
                    mapType: 'china',
                    itemStyle: {
                        normal: {label: {show: true}},
                        emphasis: {label: {show: true}}
                    },
                    data: [
                        {name: data[0].province[0], value: data[0].ps[0]},
                        {name: data[0].province[1], value: data[0].ps[1]},
                        {name: data[0].province[2], value: data[0].ps[2]},
                        {name: data[0].province[3], value: data[0].ps[3]},
                        {name: data[0].province[4], value: data[0].ps[4]},
                        {name: data[0].province[5], value: data[0].ps[5]},
                        {name: data[0].province[6], value: data[0].ps[6]},
                        {name: data[0].province[7], value: data[0].ps[7]},
                        {name: data[0].province[8], value: data[0].ps[8]},
                        {name: data[0].province[9], value: data[0].ps[9]},
                        {name: data[0].province[10], value: data[0].ps[10]},
                        {name: data[0].province[11], value: data[0].ps[11]},
                        {name: data[0].province[12], value: data[0].ps[12]},
                        {name: data[0].province[13], value: data[0].ps[13]},
                        {name: data[0].province[14], value: data[0].ps[14]},
                        {name: data[0].province[15], value: data[0].ps[15]},
                        {name: data[0].province[16], value: data[0].ps[16]},
                        {name: data[0].province[17], value: data[0].ps[17]},
                        {name: data[0].province[18], value: data[0].ps[18]},
                        {name: data[0].province[19], value: data[0].ps[19]},
                        {name: data[0].province[20], value: data[0].ps[20]},
                        {name: data[0].province[21], value: data[0].ps[21]},
                        {name: data[0].province[22], value: data[0].ps[22]},
                        {name: data[0].province[23], value: data[0].ps[23]},
                        {name: data[0].province[24], value: data[0].ps[24]},
                        {name: data[0].province[25], value: data[0].ps[25]},
                        {name: data[0].province[26], value: data[0].ps[26]},
                        {name: data[0].province[27], value: data[0].ps[27]},
                        {name: data[0].province[28], value: data[0].ps[28]},
                        {name: data[0].province[29], value: data[0].ps[29]},
                        {name: data[0].province[30], value: data[0].ps[30]},
                        {name: data[0].province[31], value: data[0].ps[31]},
                        {name: data[0].province[32], value: data[0].ps[32]},
                        {name: data[0].province[33], value: data[0].ps[33]},
                        {name: data[0].province[34], value: data[0].ps[34]},
                    ]
                }
            ]
        };
        mapChart.setOption(mapoption);
        $(window).resize(mapChart.resize);
    }

    function bar(res) {
        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        //竖型
        // var baroption = {
        //     title: {
        //         text: '各省份排名',
        //         subtext: '数据来自此平台'
        //     },
        //     tooltip: {
        //         trigger: 'axis',
        //         axisPointer: {
        //             type: 'shadow'
        //         }
        //     },
        //     toolbox: {
        //         show: true,
        //         orient: 'vertical',
        //         x: 'right',
        //         y: 'center',
        //         feature: {
        //             mark: {show: true},
        //             dataView: {show: true, readOnly: false},
        //             restore: {show: true},
        //             saveAsImage: {show: true}
        //         }
        //     },
        //     legend: {
        //         data: ['最高分', '平均分', '通过率(%)']
        //     },
        //     grid: {
        //         left: '4%',
        //         right: '4%',
        //         bottom: '3%',
        //         containLabel: true
        //     },
        //     xAxis: {
        //         type: 'value',
        //         boundaryGap: [0, 0.01]
        //     },
        //     yAxis: {
        //         type: 'category',
        //         data: res[0].province
        //     },
        //     series: [
        //         {
        //             name: '最高分',
        //             type: 'bar',
        //             data: res[0].max
        //         },
        //         {
        //             name: '平均分',
        //             type: 'bar',
        //             data: res[0].avg
        //         },
        //         {
        //             name: '通过率(%)',
        //             type: 'bar',
        //             data: res[0].ps
        //         }
        //     ]
        // };
        var baroption = {
            title : {
                text: '各省份排名',
                   subtext: '数据来自此平台'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['最高分','平均分','通过率(%)']
            },
             toolbox: {
                  show: true,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
            },
            grid:{
                x:30,
                x2:10,
                y2:24
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : res[0].province,
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                 {
                    name:'最高分',
                    type:'bar',
                    data:res[0].max
                },
                {
                    name:'平均分',
                    type:'bar',
                    data:res[0].avg
                },
                {
                    name:'通过率(%)',
                    type:'bar',
                    data:res[0].ps
                }
            ]
        };
        barChart.setOption(baroption);
        window.onresize = barChart.resize;
    }

</script>
</body>
</html>